Skip to content

feat: clip overlay, reel polish, and UX improvements#35

Merged
GraysonCAdams merged 7 commits intomainfrom
feat/clip-overlay-and-ux-polish
Mar 2, 2026
Merged

feat: clip overlay, reel polish, and UX improvements#35
GraysonCAdams merged 7 commits intomainfrom
feat/clip-overlay-and-ux-polish

Conversation

@GraysonCAdams
Copy link
Copy Markdown
Collaborator

Summary

  • Fix iOS Safari crash: Replace broken "inject into feed" approach with a dedicated full-screen ClipOverlay for viewing single clips (back button, swipe-to-dismiss, history management)
  • Enrich single clip API: GET /api/clips/[id] now returns full FeedClip data (username, avatar, reactions, watched status, etc.)
  • Fix reactions: Enforce one reaction per user per clip (changing emoji replaces the old one)
  • Reel layout polish: Remove speed controls, redesign music disc popout as dropdown menu, adjust overlay positions, add periodic watch percent tracking
  • Comments UX: Inline GIF picker above input, keyboard/GIF toggle, Escape key support, auto-focus
  • Share shortcut nudge: "Share clips faster" hint in add video form and upload success screen
  • End-of-feed slide: Contextual messaging when user reaches the end of their feed
  • Dev mode GIFs: Placeholder GIF grid when no GIPHY API key is configured

Test plan

  • Share a clip → wait for "Ready!" → tap "View in feed" → clip opens in overlay (not injected into feed)
  • Back button, swipe left, and Home button all dismiss the overlay
  • Browser back button/gesture dismisses the overlay
  • Deep link /?clip=<id> opens the overlay
  • Deep link /?clip=<id>&comments=true opens overlay with comments sheet
  • After dismissing overlay, feed reflects watched/favorited changes
  • No crash on iOS Safari
  • Reactions toggle correctly (one per user per clip)
  • Music disc popout shows labeled dropdown menu
  • GIF picker opens inline in comments, Escape dismisses it
  • End-of-feed slide shows appropriate message per filter tab
  • npm run check passes

When a clip download fails, the unique (group_id, original_url) constraint
prevented re-submitting the same URL. Now both the clips API and share
endpoint detect failed clips and auto-retry the download instead of
returning a 409 duplicate error.
The endpoint returned minimal fields missing addedByUsername, reactions,
watched status, etc. This caused a crash in ReelOverlay when rendering
a single clip via "View in feed". Now returns the same shape as the
feed list endpoint using parallel queries.
Previously users could add multiple different emoji reactions to the
same clip. Now changing your reaction removes the old one first,
matching the expected one-reaction-per-user behavior.
- Remove playback speed controls (SpeedPill, keyboard shortcuts)
- Add periodic watch percent updates while viewing
- Redesign music disc popout as a dropdown menu with labels
- Adjust bottom positions for overlay, sidebar, and progress bar
- Move ActionSidebar and MusicDisc outside overlay-content div
- Add hideViewBadge prop to ReelItem for overlay use
- Send watch percent before opening viewers sheet
Replace the broken "inject into feed" approach with a standalone
full-screen overlay. Fixes iOS Safari crash caused by incomplete
clip data when rendering via viewClipSignal.

- Create ClipOverlay.svelte with back button, swipe-to-dismiss,
  and history management
- Replace viewClipSignal with clipOverlaySignal across all callers
- Remove inline caption editing from upload status flow
- Add end-of-feed slide with contextual messaging
- Pause background feed reels when overlay is active
- Deep links and "View in feed" now open the overlay
- Move GIF picker into the content area above the comment input
  instead of a separate overlay
- Toggle between keyboard and GIF icons on the input button
- Add Escape key to dismiss GIF picker or close comments sheet
- Auto-focus GIF search when picker opens
- Close GIF picker when text input is focused
- Add "Share clips faster from other apps" hint link in AddVideo form
  and upload success screen when shortcut nudge is active
- Enable GIF picker in dev mode with placeholder images
- Generate dev placeholder GIFs when no GIPHY API key is configured
@GraysonCAdams GraysonCAdams merged commit ddf3bff into main Mar 2, 2026
17 checks passed
@GraysonCAdams GraysonCAdams deleted the feat/clip-overlay-and-ux-polish branch March 2, 2026 07:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant